<template>
	<view class='details'>
		<view class="headnavi">
			<image class="arrow" src="/static/home/main/details/arrow.png" @click="goBack()"></image>
			<view class="navi-title">菜品</view>
		</view>
		<view class='content'>

			<view class="dish-box">
				<view class="main">
					<image :src="this.image" class="dish-img" mode=" widthFix"></image>
					<view class="info">
						<view class="dish-name">{{name}}</view>
						<view class="rates">
							<view class='text'>{{rate}}/5.0</view>
							<image class='star-icon' src="../../static/home/blind box/blindbox/star.png"></image>
							<view class="visits">•{{visits}}人吃过</view>
						</view>
						<view class="price">
							<view class="price-text">
								估价<view class="pricing">¥{{price}}</view>
							</view>
							<view class="funcs">
								<image class="collect" src='/static/home/main/details/collect.png' @click="addto()">
								</image>
								<image class="trythis" src='/static/home/main/details/eat.png' @click="eatThis()">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="restaurant">
					<image class="res-avatar" :src="respic" mode="aspectFill" alt=""></image>
					<view class="tag">店铺</view>
					<view class="res-info">
						<view class="res-name">{{resname}}</view>
						<view class="res-location">
							<image class="loc-icon" src="/static/home/main/details/icon-position.png" mode=" aspectFit">
							</image>
							<view class="loc-text">{{reslocation}}</view>
						</view>
					</view>
				</view>

			</view>
			<view class="filters">
				<view class="text">最近评价</view>
			</view>
			<view class="comments">

				<scroll-view scroll-y class="posts-container" @scrolltolower="onScrolltolower">
					<view style="height:90vh;">
						<div class="post" v-for="(item,index) in Data.slice(0, 10+endIndex)">

							<div class="main" @click="goDetails(item.id)">
								<div class="img">
									<image :src="item.pictureUrl1" alt="" mode="aspectFill" />
								</div>
								<div class="contents">
									<div class="contents-text">{{item.content}}</div>
									<div class="shop">
										<div class="img">
											<image :src="item.dish.image" alt="" />
										</div>
										<div class="shop-text">
											<div class="tag-rate">
												<div class="tag"> 菜品</div>
												<uni-rate v-model="item.dish.stars" @change="onChange" size=5vw
													class="rate" allowHalf active-color="#FF8D1A" readonly />
											</div>
											<div class="shop-name">{{item.dish.name}}</div>
										</div>
									</div>
								</div>
							</div>

							<div class="poster">
								<div class="poster-img">
									<image :src="item.user.avatar" alt="" />
								</div>

								<div class="post-message">
									<div class="poster-name">{{item.user.userName}}</div>
									<div class="time">{{item.createTime}}</div>
								</div>

								<div class="like">
									<div class="like-img">
										<image v-if="!item.liked" :src="likeImage1" alt="" @click="like(item)" />
										<image v-else="item.liked" :src="likeImage2" alt="" @click="like(item)" />
										<!-- <image src="../../static/chishenme/like.png" alt="" /> -->

									</div>
									<div class="like-text">{{item.likes}}</div>
								</div>

								<div class="comment">
									<div class="comment-img">
										<image src="../../static/chishenme/comment.png" alt="" />
									</div>
									<div class="comment-text">{{item.commentCount}}</div>
								</div>



								<div class="others">
									<div class="others-img">
										<image src="../../static/chishenme/others.png" alt="" />
									</div>
								</div>

							</div>

						</div>
					</view>


				</scroll-view>


			</view>
			<view class="write" @click="goWrite()">
				写评价...
				<view class="write-icon">
				</view>
			</view>
		</view>
		<view v-if="showModal" class="modal-overlay">
			<view class="modal-content">
				<view class="modal-header">
					<text>今天吃{{this.name}}!</text>
				</view>
				<view class="modal-body">
					<text>需要导航到店吗？</text>
					<view class="restaurant">
						<image class="res-avatar" :src="respic" mode="aspectFill"></image>
						<view class="tag">店铺</view>
						<view class="res-info">
							<view class="res-name">{{resname}}</view>
							<view class="res-location">
								<image class="loc-icon" src="/static/home/main/details/icon-position.png"
									mode=" aspectFit"></image>
								<view class="loc-text">{{reslocation}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button @click="navigateToStore" class="navigating">导航到店铺（高德地图）</button>
					<button @click="showModal = false" class="cancel">不了</button>
				</view>
			</view>
		</view>


	</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				Data: [],
				likeImage1: "../../static/chishenme/like.png",
				likeImage2: "../../static/chishenme/afterLike.png",
				reslocation: '桂园食堂',
				idImgUrlMap: {},
				scrollable: false,
				showModal: false,
				rate: 0,
				createTime: "",
				description: "",
				eatNumber: 2,
				id: 1,
				image: "",
				name: "无",
				navigationUrl: "url1",
				price: 0,
				restaurantId: 1,
				stars: 0,
				updateTime: "",
				index: 1,
				resname: '',
				respic: '',
				showUsermenus: false,
				endIndex: 0,
				
				visits: 0,
				reviews: [],
				userid: 0,
				Data: [{
					liked: false,
					id: 3,
					userId: 2,
					content: "美味小厨不错",
					pictureUrl1: "",
					likes: 1,
					restaurant: {
						restaurantId: 1,
						name: "美味小厨",
						picUrl: "https://img.zcool.cn/community/019a975cda9a6fa801208f8bf0a069.png@1280w_1l_2o_100sh.png",
						score: 8.5
					},
					dish: {
						id: 2,
						name: "孜然羊肉",
						price: 9,
						stars: 4,
						navigationUrl: "url2",
						restaurantId: 1,
						image: "https://materials.cdn.bcebos.com/images/17521900/0e57e629c85a7df8cb6ede169146f834.jpeg",
						description: "肉香四溢",
					},
					user: {
						id: 2,
						userName: "李四",
						password: "234",
						phone: "25812314725",
						gender: false,
					},
					createTime: "2024-05-08T05:16:45.000+00:00",
					updateTime: "2024-05-08T05:17:37.000+00:00",
				}],
			}
		},
		computed: {},
		onLoad(e) {
			const userInfo = uni.getStorageSync('userInfo');
			this.userid = userInfo.data.id;
			this.id = e.id;
			
			uni.request({
				url: "http://localhost:8080/dish/detail/" + this.id,
				method: 'GET',
				success: (res) => {
					console.log(res.data.data);
					this.name = res.data.data.name;
					this.rate = res.data.data.stars;
					this.price = res.data.data.price;
					this.id = res.data.data.id;
					this.restaurantId = res.data.data.restaurantId;
					console.log("this.id")
					console.log(this.id)
					this.image = res.data.data.image;
					this.visits = res.data.data.eatNumber;
					this.fetchresdata(this.restaurantId);
					/* this.fetchresdata(this.id); */
					this.fetchData(1);
					// 在这里处理请求成功的逻辑
				},
				fail: (err) => {
					console.error(err);
					// 在这里处理请求失败的逻辑
				}
			});
			
			uni.request({
				url: "http://localhost:8080/posting/" + this.id + "/getAllPosting",
				method: 'GET',
				success: (res) => {
					console.log("获取到数据")
					console.log(res.data.data);
					this.reviews = res.data.data
					// 在这里处理请求成功的逻辑
				},
				fail: (err) => {
					console.error(err);
					// 在这里处理请求失败的逻辑
				}
			});


		},
		methods: {
			closePopup() {
				this.showUsermenus = false;

			},
			fetchresdata(resid) {
				uni.request({
					url: "http://localhost:8080/restaurant/details/" + resid,
					methods: "GET",
					success: (res) => {
						console.log("店铺数据")

						console.log(res.data.data.name)
						this.resname = res.data.data.name
						this.respic = res.data.data.picUrl
						this.reslocation = res.data.data.restaurantAddress
					},
					fail: (err) => {
						console.error(err)
						// 在这里处理请求失败的逻辑
					}
				})

			},
			addto() {
				uni.navigateTo({
					url: "/pages/collectDish/collectDish?id=" + this.id
				})
			},
			goDetails(id) {
				uni.navigateTo({
					url: '../postDetail/postDetail?id=' + id + ''
				})

			},
			goBack() {
				uni.navigateBack(
				);
			},
			goWrite() {
				console.log("写评价")
				uni.navigateTo({
					url: '/pages/review/review?id=' + this.id +
						'&name=' + this.name +
						'&stars=' + this.rate +
						'&image=' + this.image +
						'&restaurantId=' + this.restaurantId,
					success: res => {
						console.log("已跳转")
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			requestRencet() {
				console.log('最近')
				this.index = 1
			},
			requestTrend() {
				console.log('热评')
				this.index = 2
			},
			requestHate() {
				console.log('差评')
				this.index = 3
			},
			requestPictured() {
				console.log('带图')
				this.index = 4
			},
			eatThis() {
				console.log('就吃这个')
				this.showModal = true
			},
			favor() {
				console.log('喜欢/收藏')
				uni.request({
					url: "http://localhost:8080/preference/" + this.userid + "/addDishToMenu?menuId=1&dishId=" +
						this.id,
					method: "POST",
					success: (res) => {
						uni.showToast({
							icon: 'success',
							title: "已加入最爱"
						})

						console.log(res.data)

					},
					fail: (err) => {

						console.error("失败")
						// 在这里处理请求失败的逻辑
					}
				})

			},
			fetchData(id) {
				uni.request({
					url: "http://localhost:8080/posting/" + this.id + "/getAllPosting",
					method: 'GET',
<<<<<<< HEAD

					success: (res) => {
						const userInfo = uni.getStorageSync('userInfo');
						// if(id==1){
						this.Data = res.data.data;
						// }else if(id>1){
						//    this.Data.push(...res.data.data);
						// }


						//console.log(id)
						this.Data = this.Data.map((item) => {
							if (item.pictureUrl1) {
								this.getImg(item, item.pictureUrl1, 1);

=======
					success: res1 => {
							// console.log("根据文件地址获得的base64编码图片"); 
							// console.log(res1.data.data.data)
							// 将base64字符串转换为ArrayBuffer格式
							// const arrayBuffer = uni.base64ToArrayBuffer(res1.data.data.data);
							// // 将ArrayBuffer转换为Blob对象
							// const blob = new Blob([arrayBuffer], { type: 'image/png' });
							// // 创建Blob URL
							// const imgUrl = URL.createObjectURL(blob);
							const base64Data = res1.data.data.data;
							// 直接设置图片 src 属性
							const imgUrl = `data:image/png;base64,${base64Data}`;
							this.idImgUrlMap[id] = imgUrl;
							if(index==1){
								item.pictureUrl1=imgUrl;
							}else if(index==2){
								item.user.avatar=imgUrl
>>>>>>> cf370fbbdd0e2619b30401affbcab9dcb463763f
							}
							if (item.user.avatar) {
								this.getImg(item, item.user.avatar, 2);
							}
							if (!item.user.avatar) {
								item.user.avatar = this.defaultAvatar;
							}
							if (!item.pictureUrl1) {
								item.pictureUrl1 = item.dish.image;
							}
							if (!item.likes) {
								item.likes = 0;
							}
							item.createTime = this.formatDate(item.createTime);

							item.likeUser.forEach((item2) => {
								if (item2 === userInfo.data.id) {
									item.liked = true;
								}
							});
							console.log(item)
							return item;
						});
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			onScrolltolower() {
				this.endIndex += 10;
			},
			formatDate(dateString) {
				const date = new Date(dateString);

				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2);
				const day = ("0" + date.getDate()).slice(-2);
				const hours = ("0" + date.getHours()).slice(-2);
				const minutes = ("0" + date.getMinutes()).slice(-2);
				const seconds = ("0" + date.getSeconds()).slice(-2);

				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

				return formattedDate;
			},
			getImg(item, id, index) {
				if (this.idImgUrlMap[id]) {
					const imgUrl = this.idImgUrlMap[id];
					if (index == 1) {
						item.pictureUrl1 = imgUrl;
					} else if (index == 2) {
						item.user.avatar = imgUrl;
					}
					return imgUrl;
				}
				uni.request({ //获取图片
					url: 'http://localhost:8080/image/getImage?id=' + id,
					method: 'GET',
					success: res1 => {
						// console.log("根据文件地址获得的base64编码图片"); 
						// console.log(res1.data.data.data)
						// 将base64字符串转换为ArrayBuffer格式
						const arrayBuffer = uni.base64ToArrayBuffer(res1.data.data.data);
						// 将ArrayBuffer转换为Blob对象
						const blob = new Blob([arrayBuffer], {
							type: 'image/png'
						});
						// 创建Blob URL
						const imgUrl = URL.createObjectURL(blob);
						this.idImgUrlMap[id] = imgUrl;
						if (index == 1) {
							item.pictureUrl1 = imgUrl;
						} else if (index == 2) {
							item.user.avatar = imgUrl
						}

						//console.log(this.idImgUrlMap)
						return imgUrl;
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			like(item) {

				const userInfo = uni.getStorageSync('userInfo');

				if (item.liked) { //取消点赞
					uni.request({
						url: 'http://localhost:8080/posting/' + item.id + '/deleteLike?userId=' + userInfo.data.id,
						method: 'POST',
						data: {},
						success: function(res) {},
						fail: function(err) {
							// 处理失败情况
							console.error(err);
							// 其他操作...
						}
					});
					// console.log(item.likes)
					item.liked = false;
					item.likes--;
				} else {
					uni.request({ //点赞
						url: 'http://localhost:8080/posting/' + item.id + '/like?userId=' + userInfo.data.id,
						method: 'POST',
						data: {},
						success: function(res) {},
						fail: function(err) {
							// 处理失败情况
							console.error(err);
							// 其他操作...
						}
					});
					item.liked = true;
					item.likes++;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.details {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #E5E5E5;

		.content {}

		.modal-overlay {
			z-index: 2;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;

			.modal-content {
				background: #fff;
				border-radius: 20px;
				width: 80%;
				max-width: 300px;
				padding: 20px;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
				
				.modal-header {
					text-align: center;
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 20px;
				}

				.modal-body {
					text-align: center;
					margin-bottom: 20px;
					
					.restaurant {
						margin-top: 5vh;
						width: 90%;
						border-radius: 20rpx;
						background-color: #E5E5E5;
						margin-left: 4.5vw;
						display: flex;
						flex-direction: row;
						height: 120rpx;
						.res-avatar {

							width: 5vh;
							height: 5vh;
							margin-left: 4vw;
							border-radius: 50rpx;
						}

						.tag {
							margin-top: 10rpx;

							margin-left: 5rpx;
							height: 35rpx;
							background-color: #A6A6A6;
							width: 60rpx;
							color: #E3E3E3;
							font-size: 23rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 10rpx;
						}

						.res-name {
							margin-left: 5rpx;
							margin-top: 5rpx;
							font-size: 23rpx;
						}

						.res-location {
							font-size: 23rpx;
							height: 1vh;
							display: flex;
							flex-direction: row;

							.loc-icon {
								padding-top: 13rpx;
								width: 3vw;
								height: 3.5vw;
							}

							.loc-text {
								margin-top: 0.5vh;
								margin-left: 1vw;
								color: #808080;
							}
						}
					}
				}

				.modal-footer {
					margin-top: 10vh;
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-direction: column;

					.navigating {
						color: #FF8D1A;
						width: 100%;
						background-color: #FFFFFF;
					}

					.cancel {
						color: #FF8D1A;
						width: 100%;
						background-color: #FFFFFF;
					}
				}

			}
		}

		.headnavi {
			height: 10%;
			width: 100%;
			background-color: white;
			position: fixed;
			display: flex;
			z-index: 2;

			.arrow {
				width: 6vw;
				height: 3vh;
				margin-top: 5vh;
				margin-left: 5vw;
			}

			.navi-title {
				margin-top: 5vh;
				margin-left: 35vw;
				font-size: 40rpx;
				color: orange;
			}
		}

		.dish-box {
			margin-left: 20rpx;
			width: 710rpx;
			display: flex;
			flex-direction: column;
			margin-top: 10.5vh;
			background-color: white;
			border-radius: 50rpx;
			margin-bottom: 1vh;

			.main {
				display: flex;

				.dish-img {
					width: 30vw;
					height: 30vw;
					border-radius: 40rpx;
					margin-top: 1vh;
					margin-left: 3vw;
					margin-right: 3vw;
				}

				.info {
					display: flex;
					flex-direction: column;

					.dish-name {
						margin-top: 1vh;
						font-size: 40rpx;
						font-weight: 700;
					}

					.price {
						display: flex;
						flex-direction: row;
						color: darkgray;
						margin-top: auto;
						align-self: center;
						width: 55vw;

						.price-text {
							font-size: 30rpx;
							display: flex;
							flex-direction: row;
							align-self: center;

							.pricing {
								color: orange;
							}
						}

						.funcs {
							margin-left: auto;
							margin-top: 9rpx;
							display: flex;
							flex-direction: row;
							align-self: center;

							.collect {
								width: 15vw;
								height: 4vh;
								align-self: center;
							}

							.trythis {
								width: 18vw;
								height: 4vh;
								align-self: center;
							}
						}
					}

					.rates {

						display: flex;
						flex-direction: row;

						.text {
							font-weight: 700;
							color: orange;
							margin: 5rpx;
						}

						.visits {

							font-weight: 500;
							color: darkgray;
							font-size: 28rpx;
							margin: 5rpx;
						}

						.star-icon {
							margin-top: 8rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}

			.restaurant {
				margin-top: 1vh;
				margin-bottom: 1vh;
				margin-left: 20rpx;
				width: 670rpx;
				border-radius: 30rpx;
				background-color: #E5E5E5;
				display: flex;
				flex-direction: row;


				.res-avatar {

					width: 5vh;
					height: 5vh;
					margin: 2vw;
					border-radius: 50rpx;
				}

				.tag {
					margin-top: 10rpx;

					margin-left: 5rpx;
					height: 35rpx;
					background-color: #A6A6A6;
					width: 60rpx;
					color: #E3E3E3;
					font-size: 23rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
				}

				.res-name {
					margin-left: 5rpx;
					margin-top: 5rpx;
					font-size: 23rpx;
				}

				.res-location {
					font-size: 23rpx;
					height: 1vh;
					display: flex;
					flex-direction: row;

					.loc-icon {
						padding-top: 13rpx;
						width: 3vw;
						height: 3.5vw;
					}

					.loc-text {
						margin-top: 0.5vh;
						margin-left: 1vw;
						color: #808080;
					}
				}
			}
		}

		.write {
			padding-left: 3vw;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #CCCCCC;
			height: 6vh;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 4vw;
			color: #565656;

			.write-icon {}
		}

		.filters {


			width: 100%;
			height: 100%;
			color: #000000;
			margin-left: 5vw;
			font-size: 30rpx;


		}

		.comments {
			.posts-container {

				width: 100%;
				overflow-y: scroll;
				height: 90vh;
				padding-bottom: 8vh;

				.title2 {
					margin: 0 2vw;
					padding: 0.5vh 0;
					font-size: 4vw;
					text-align: center;
					background-color: #F4F4F5;
					color: #9C9C9C;
					box-sizing: border-box;
					background-color: transparent;
					height: 80vh;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.post {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 10px;

					.main {
						display: flex;
						height: 350rpx;
						width: 710rpx;
						border-radius: 50rpx;
						background: linear-gradient(to bottom, white, #E5E5E5);
						margin: 0 30rpx 0 30rpx;
						box-shadow: -5rpx -5rpx 30rpx 1rpx rgba(0, 0, 0, 0.1);

						.img {
							flex: 9;
							background-color: white;
							margin: 20rpx 0 20rpx 20rpx;
							border-radius: 30rpx;

							image {
								height: 100%;
								width: 100%;
								border-radius: 30rpx;
							}
						}

						.contents {
							flex: 11;
							margin: 20rpx;
							display: flex;
							flex-direction: column;

							.contents-text {
								flex: 1;
								font-size: 30rpx;
								max-height: 14vh;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 5;
								/* 根据需要调整行数 */
							}

							.shop {
								background-color: #E5E5E5;
								border-radius: 20rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								height: 6vh;
								margin-top: auto;

								.img {
									flex: 4;
									height: 95%;
									display: flex;
									justify-content: flex-start;
									align-items: center;
									background-color: transparent;
									margin: 0;
									padding-left: 10rpx;
									border-radius: 10rpx;

									image {
										width: 90%;
										height: 90%;
										border-radius: 15rpx;
									}
								}

								.shop-text {
									flex: 9;
									display: flex;
									flex-direction: column;

									.tag-rate {
										display: flex;

										.tag {
											background-color: #A6A6A6;
											width: 60rpx;
											color: #E3E3E3;
											font-size: 25rpx;
											display: flex;
											justify-content: center;
											align-items: center;
											border-radius: 10rpx;
										}

										.rate {
											margin: 0 1vw;
										}
									}

									.shop-name {
										font-size: 30rpx;
									}
								}
							}
						}
					}

					.poster {
						width: 95%;
						height: 100rpx;
						display: flex;

						.poster-img {
							width: 20%;
							background-color: transparent;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;

							image {
								width: 11vw;
								height: 11vw;
								border-radius: 50%;
							}
						}

						.post-message {
							width: 50%;
							background-color: transparent;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: flex-start;

							.poster-name {
								height: 55rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								max-width: 220rpx;
								display: inline-block;
								padding-top: 10rpx;
								font-size: 30rpx;
							}

							.time {
								height: 45rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								display: inline-block;
								max-width: 250rpx;
								font-size: 23rpx;
								color: #9C9C9C;
								justify-content: center;
								align-items: center;
								padding-bottom: 20rpx;
							}
						}

						.comment {
							width: 20%;
							display: flex;
							justify-content: center;
							align-items: center;

							.comment-img {
								margin: 0;
								padding: 0;
								margin-left: 10rpx;
								width: 50rpx;
								padding-top: 10rpx;

								image {
									width: 5.5vw;
									height: 5vw;

								}
							}

							.comment-text {
								width: 100rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								max-width: 100rpx;
								display: inline-block;
								justify-content: flex-end;
								align-items: flex-end;

							}
						}

						.like {

							display: flex;
							justify-content: center;
							align-items: center;
							padding-right: 10rpx;

							.like-img {
								margin: 0;
								padding: 0;
								margin-left: 10rpx;
								width: 50rpx;
								padding-top: 10rpx;

								image {
									width: 5vw;
									height: 5vw;
								}
							}

							.like-text {
								width: 100rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								max-width: 100rpx;
								display: inline-block;
								justify-content: flex-start;
								align-items: flex-start;
							}
						}

						.others {

							display: flex;
							justify-content: center;
							align-items: center;
							padding-left: 10rpx;
							padding-bottom: 10rpx;

							.others-img {
								width: 100%;

								image {
									height: 1vw;
									width: 5vw;
								}
							}
						}
					}
				}

			}
		}








	}
</style>